<html>
	<head>
		<script type="text/javascript" src="/static/jquery-1.5.1.js"></script>
		<link rel="stylesheet" href="/static/jquery.ui.all.css">
		<script src="/static/jquery-1.5.1.js"></script>
		<script src="/static/jquery.ui.core.js"></script>
		<script src="/static/jquery.ui.widget.js"></script>
		<script src="/static/jquery.ui.datepicker.js"></script>
		<link rel="stylesheet" href="/static/demos.css">
		<link rel="stylesheet" href="/static/jquery.ui.datepicker.css">
		<link rel="stylesheet" href="static/validationEngine.jquery.css" type="text/css"/>
       
        <script src="static/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
        </script>
        <script src="static/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
        </script>
		{{css}}
		
		<script>
			jQuery(document).ready(function(){
                // binds form submission and fields to the validation engine
                jQuery("#add").validationEngine();
            });
			
			$(function() {
			$( "#datepicker" ).datepicker({
			showOn: "button",
			buttonImage: "/static/images/calendar.png",
			buttonImageOnly: true
				});
			});
	
			function setPriceFree( isFree, priceInputFieldId ) {
				var input = $('#' + priceInputFieldId );
				if (isFree) {
					input.val("0.00");
				}
				else {
					input.val( "" );
				}
				input.attr("readonly", isFree ? "readonly" : "");
			}
		</script>
	</head>
	<body>
		<div id="page">
		{{header}}
		<div id="content">
			<div id="application_form_page">
			<h1 class="appDetailsHeading">Application Details</h1>
			<div class="clear"></div>
			<div class="heading">
			
				<div class="clear"></div>
				</div>
			<div class="content">
			<div id="app_info">
				<form id="add" action="{{url}}" method="post" enctype="multipart/form-data">
				<fieldset>
				<legend>General Information</legend>
					<div class="formItem">
					<span class="left-of-label"></span>
					<span class="label">App Name</span>
					<span>
						<input id="AppName" class="validate[required] name="AppName" maxlength="250" type="text">
					</span>
					 
					</div>
					<div class="formItem full_width">
					<span class="left-of-label"></span>
					<span class="label ">Title</span>
					<span class="input">
						<input id="title" class="validate[required] name="Title" maxlength="250" type="text">
					</span>
					</div>
					
					<div class="formItem">
					<span class="left-of-label"></span>
					<span class="label">Category</span>
					<span>
						<select id="parentCategoryList" name="ddlCategory">
							
							{% for category in categorys %}
								<option value={{category.CategoryID}}>{{category.CategoryName}}</option>
							{% endfor %}	
						</select>
						<select style="display: none;" id="childCategoryList"></select>
					</span>
					 
					</div>
					
					<div class="formItem">
					<span class="left-of-label"></span>
					<span class="label">Device</span>
					<span>
						<select id="parentDeviceList" name= "ddlDevice">
							
							{% for device in devices %}
								<option value={{device.DeviceID}}>{{device.DeviceName}}</option>
							{% endfor %}	
						</select>
						<select style="display: none;" id="childCategoryList"></select>
					</span>
					 
					</div>
					<div class="formItem full_width">
						<div class="top-of-input"></div>
						<span class="label">Keywords</span>
						<span class="input"><input id="keywordsString" class="validate[required] name="Keyword" type="text"></span>
						<span class="optionalFlag">Optional</span>
						<span class="helperText" style="margin-left: 2px;">keywords can be space and/or comma delimited</span>
					</div>
					
					   <div class="formItem">
							<span class="left-of-label"></span>
							
							<span class="label" style="vertical-align: top;">Description</span>
							<span class="input full_width">
								<textarea id="publisherDescription" class="validate[required] name="Description" onblur="trimTextArea(this, 'Description', 4000)" onchange="trimTextArea(this,'trimTextArea', 'Description', 4000)"></textarea>
							</span>
						</div>
					
					<div class="formItem">
						<span class="left-of-label"></span>
						<span class="label">Supported Languages</span>
						<select id="languageList" name="ddlLanguage">
								
							{% for language in languages %}
								<option value={{language.LanguageID}}>{{language.LanguageName}}</option>
							{% endfor %}
								
						</select>
						
					</div>
					
					<div class="formItem">
					<span class="left-of-label"></span>
					<span class="label">Min version</span>
					<span>
						<select id="parentMinverisonList" name="ddlMinversion">
							
							{% for version in versions %}
								<option value={{version.VersionID}}>{{version.VersionName}}</option>
							{% endfor %}
						</select>
						
					</span>
					 
					</div>
					
					<div class="formItem">
						<span class="label">List Price</span>
						<span class="input">
						<span style="vertical-align: top;">$</span>
						
						
						
								<input readonly="readonly" id="Price" name="Price" style="text-align: right; width: 75px;" value="0.00" type="text">
						
						</span>
						
						<span>
							<input checked="checked" id="freeOption" onclick="javascript:setPriceFree($('#freeOption').attr('checked'), 'Price');" style="width: inherit; display: inherit;" type="checkbox"><span>Free</span>      
						</span>
						
					</div>
					
					<div>
						<span class="label">
							Original Release Date<br>
						</span>
						
						<input id="datepicker" name="ReleaseDate" type="text">
						
					</div>
					<div class="formItem">
						<span class="label">
							.APK file (source file) <br>
						</span>
						<span class="input"><input id="file1" class="validate[required]" type="file" name="file"/></span>
					</div>
					
					<div class="formItem">
						<span class="label">
							App Icons<br>
						</span>
						<span class="input"><input id="file2" class="validate[required]" type="file" name="imgIcon"/></span>
					</div>
					
					<div class="formItem">
						<span class="label">
							Screenshots <br>
						</span>
						<span class="input"><input id="file3" class="validate[required]" type="file" name="imgScreenshots"/></span>
					</div>
					
				</fieldset>
					
				<div>
				<input id="Save" name="Save" class="btTxt submit" type="submit" value="Register"  />
				</div>
				
				</form>
			</div>
			</div>
			</div>
		</div>
		{{footer}}
	</body>
</html>